import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import { Form, Input, DatePicker } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { DropDownSelect } from '@/components/DropDownSelect/index';
import moment from 'moment';
import { dealElement } from '@/utils/util';

interface IProps {
  dispatch?: ({ type }: { type: string, payload?: any }) => Promise<any>;
  current: number;
  form: any;
  initCurrent: Function;
  new: boolean;
  dict?: any;
  cond?: any;
}

const FormItem = Form.Item;
const { RangePicker } = DatePicker;

@connect(({ task_month }) => ({
  cond: task_month.reportCond,
}))
class Search extends Component<IProps, any> {

  search = e => {
    e.preventDefault();
    const { dispatch, form, initCurrent } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'task_month/updateReportCond',
          payload: {
            name: values.name,
            startTime: Array.isArray(values.doneTime) && values.doneTime[0] ? moment(values.doneTime[0]).format("YYYY-MM-DD HH:mm:ss") : null,
            endTime: Array.isArray(values.doneTime) && values.doneTime[1] ? moment(values.doneTime[1]).format("YYYY-MM-DD HH:mm:ss") : null,
          }
        })
        initCurrent()
      }
    });
  }

  handleChangeTime = (value) => {

    const { cond = {}, dispatch } = this.props;
    cond['startTime'] = Array.isArray(value) && value[0] ? moment(value[0]).format("YYYY-MM-DD HH:mm:ss") : null;
    cond['endTime'] = Array.isArray(value) && value[1] ? moment(value[1]).format("YYYY-MM-DD HH:mm:ss") : null;

    dispatch({
      type: 'task_month/updateReportCond',
      payload: cond
    })
  }

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={0} span={6}>
            <FormItem
              label="检查时间"
              {...formItemLayout}
            >
              {getFieldDecorator('doneTime')(
                <RangePicker
                  placeholder={['开始时间', '结束时间']}
                  format={'YYYY-MM-DD HH:mm:ss'}
                  style={{ width: '100%' }}
                  onChange={(v) => this.handleChangeTime(v)}
                />

              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={1} span={4}>
            <FormItem
              label="报告名称"
              {...formItemLayout}
            >
              {getFieldDecorator('name')(
                <Input style={{ width: '100%' }} placeholder="报告名称" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={3} span={14}>
            <SearchRow type="flex" justify="end">
              <SearchButton htmlType="submit" type="primary">搜索</SearchButton>
            </SearchRow>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<IProps>()(Search);
export default SearchS;
